<template>
    <div>
        <p>按钮测试：</p>
        <com-button @btn-click='btnClick'>跳转页面</com-button>
        <p>输入框测试：</p>
        <com-input
         @on-input='getVal'
         :inputValue='inputVal'
         :isButton='true'
         btnText='输入框按钮'
        >测试输入框</com-input>
        <p>输入的值：{{inputVal}}</p>
        <p>开关测试：</p>
        <com-switch @switchTo='switchTo'
            :switchOn='switchOn'
        />
        <p>多选框测试：</p>
        <com-checkbox v-for="(item, index) in testArr" 
            :key='index' 
            :value='item'
            name='fruit'
            :checked-val='checkedVal'
            @on-change='change'>
            <div class="box vertical-center">
                <img class="check-icon" v-if='checkedVal.indexOf(item) > -1' src="../assets/images/gou.png" alt="">
                <img class="check-icon" v-else src="../assets/images/quan.png" alt="">
                <p>{{item}}</p>
            </div>
        </com-checkbox>
        <p>单选框测试：</p>
        <com-radio v-for="(item, index) in testArr" 
            :key='index' 
            :value='item'
            name='furit'
            :current-val='radioVal'
            @on-change='radioChange'>
            <div class="box vertical-center">
                <img class="check-icon" v-if='radioVal == item' src="../assets/images/gou.png" alt="">
                <img class="check-icon" v-else src="../assets/images/quan.png" alt="">
                <p>{{item}}</p>
            </div>
        </com-radio>
        <p>轮播组件测试：</p>
        <com-swiper
            swiperId='swiper'
            wrapStyle='position:relative'
            containerStyle='width:20rem'
            :navigation='true'
            prevStyle='width:0.875rem;height:1rem;background-size:0.875rem 1rem'
            nextStyle='width:0.875rem;height:1rem;background-size:0.875rem 1rem'
            :pagination='true'
            paginationStyle='left: 50%;transform: translateX(-50%);'
        >
            <div class="swiper-slide" 
                v-for="(item, index) in swiperImg"
                :key='index'
                style="width:20rem;height:10rem">
                <img class="swiper-img" :src="item" alt="">
            </div>
        </com-swiper>
        <p>滚动组件测试：</p>
        <com-scroll
            ref = 'scroll'
            wrapperStyle='overflow: hidden;height:25rem'
            :data='scrollData'
            :pulldown='true'
            :pullup='true'
            @scroll='scroll'
            @pulldown='pulldown'
            @loadMore='loadMore'
            contentStyle="margin-top:-2.5rem"
            :refreshIcon='refreshIcon'
            :refreshText='refreshText'
            :loadingShow='loadingShow'
            :loadText='loadText'
        >
            <p class="scrollData"
                v-for='(item, index) in scrollData'
                :key='`scroll_${index}`'
            >{{item}}</p>
        </com-scroll>
    </div>
</template>
<script>
import {getData} from '@/api'
import baseURL from '@/config'
import ComInput from '../components/com-input'
import ComButton from '../components/com-button'
import ComSwitch from '../components/com-switch'
import ComCheckbox from '../components/com-checkbox'
import ComRadio from '../components/com-radio'
import ComSwiper from '../components/com-swiper'
import ComScroll from '../components/com-scroll'
import Validate from '../lib/validateRules.js'
export default {
    components: {
        ComInput,
        ComButton,
        ComSwitch,
        ComCheckbox,
        ComRadio,
        ComSwiper,
        ComScroll
    },
    data() {
        return {
            inputVal: '',
            switchOn: false,
            checkedVal: [],
            testArr: ['香蕉', '苹果', '橘子'],
            radioVal: '',
            swiperImg: [
                require('../assets/images/1.jpg'),
                require('../assets/images/2.jpg'),
                require('../assets/images/3.jpg'),
                require('../assets/images/4.jpg')
            ],
            scrollData: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10'],
            refreshText: '下拉刷新',
            refreshIcon: require('../assets/images/refash.png'),
            imgRotate: false,
            loadText: '',
            loadingShow: false
        }
    },
    mounted() {
        //
    },
    methods:{
        getVal(e) {
            this.inputVal = e
        },
        btnClick() {
            this.$router.push('login')
        },
        switchTo(e) {
            this.switchOn = e
            if (e) this.toast('开');
            else this.toast('关')
        },
        change(e) {
            this.checkedVal = e
        },
        radioChange(e) {
            this.radioVal = e
        },
        scroll(pos) {
            if (pos.y > 0) {
                if (pos.y >= this.$refs.scroll.distance) {
                    this.refreshText = '松手刷新'
                } else {
                    this.refreshText = '下拉刷新'
                }
            }
        },
        pulldown() {
            this.refreshText = '正在刷新'
            this.refreshIcon = require('../assets/images/loading1.gif')
            setTimeout(() => {
                this.refreshIcon = require('../assets/images/refash.png')
                this.$refs.scroll.scrollTo(0, 0, 100)
                this.$refs.scroll.changeReImgRotate()
                this.refreshText = '下拉刷新'
                this.scrollData = ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10']
            }, 2000)
        },
        loadMore() {
            this.loadingShow = true
            this.loadText = '拼命加载中...'
            setTimeout(() => {
                let newArr = []
                for(var i=1; i<=10; i++){
                    let str = '数据' + (this.scrollData.length + i)
                    newArr.push(str)
                }
                this.scrollData = this.scrollData.concat(newArr)
                this.loadingShow = false
                this.loadText = ''
            }, 2000)
        }
    }
}
</script>
<style lang="less" scoped>
.check-icon{
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.5rem
}
.swiper-img{
    width: 20rem;
    height: 10rem;
}
</style>
